<template>
  <div class="erp-board">
      <div class="board-search">
          <a-range-picker :mode="['month', 'month']" :open="yearShowOne" :placeholder="['开始月份', '结束月份']" format="YYYY-MM"
              style="width: 200px;margin-right: 20px;" :value="time" @openChange="openChange"
              @panelChange="panelChange" />
      </div>
      <div style="height: 40px;"></div>
      <div class="overview board">
          <div class="item-title">
              <strong>流程运营总览</strong>
              <span>截止{{closeTime}}</span>
          </div>
          <overview @processData="processData" :time="time"></overview>
      </div>
      <div class="analysis board">
          <div class="item-title">
              <strong>智能分析</strong>
          </div>
          <analysisTop :time="time" @data="analysisData"></analysisTop>
      </div>
      <div class="ranking board">
          <div class="item-title">
              <strong :time="time">按部门/人员查看</strong>
          </div>
          <rankingTop @processTaskModal="processTask" :time="time"></rankingTop>
      </div>
      <overviewModal :visible.sync="overviewModalVisible" :modalType='modalType' :time="time" @processTask="processTask">
      </overviewModal>
      <processTaskModal ref="processTaskModal" :visible.sync="processTaskModalVisible"></processTaskModal>
      <statisticsModal ref="statisticsModal"></statisticsModal>
  </div>
</template>
<script>
import overview from './modules/overview.vue';
import analysisTop from './modules/analysisTop.vue'
import rankingTop from './modules/rankingTop.vue'
import trend from './modules/trend.vue'
import overviewModal from './modules/overviewModal.vue';
import processTaskModal from './modules/processTaskModal.vue'
import statisticsModal from './modules/statisticsModal.vue'
import moment from 'dayjs'
export default {
  name: "average",
  components: {
      overview,
      analysisTop,
      rankingTop,
      trend,
      overviewModal,
      processTaskModal,
      statisticsModal
  },
  data() {
      return {
          // 搜索参数
          time: [],
          yearShowOne: false,
          overviewModalVisible: false,
          processTaskModalVisible: false,
          modalType: {},// 点击某一项
          process:{},// 流程参数
          
      }
  },
  created() {
      this.time = [moment(new Date).format("YYYY-MM"), moment(new Date).format("YYYY-MM")]
  },
  computed:{
      closeTime(){
          let time = moment(this.time[1]).endOf('month').format('YYYY-MM-DD').split('-')
          return `${time[0]}年${time[1]}月${time[2]}日`
      },
  },
  methods: {
      processData(type) {
          this.overviewModalVisible = true
          this.modalType = type
      },
      analysisData(type){
        this.$refs.statisticsModal.showModal(type)
      },
      processTask(val) {
          this.$refs.statisticsModal.showModal(val)
      },
      openChange(status) {
          this.yearShowOne = status;
      },
      panelChange(value) {
          console.log(value[0] > value[1])
          if(value[0] > value[1]) {
              this.time = [value[1],value[0]]
          }else {
              this.time = value
          }
          this.yearShowOne = false;
      },
  }
}
</script>




<style lang="less" scoped>
div {
  box-sizing: border-box !important;
}

.erp-board {
  position: relative;

  .board-search {
      background-color: #fff;
      display: flex;
      justify-content: flex-end;
      padding: 10px 0;
      width: calc(100% + 24px);
      position: absolute;
      top: -12px;
      left: -12px;
  }

  .board {
      .item-title {
          display: flex;
          justify-content: space-between;
          padding: 10px 0;
          align-items: center;
      }
  }
}
</style>